<template>
      <!-- mv页面 -->
    <div class="Mv_play">
      <!-- mv播放窗口 -->
        <div class="mv_box" width="100%">
           <video width="100%" :src="mv" autoplay controls="controls"></video>
           <i class="iconfont icon-fanhui retu" @click="down"></i>
        </div>
        <!-- mv标题 -->
        <mv_title/>
        <!-- 评论标题 -->
        <CommentsBox/>
        <!-- 发表评论 -->
        <div class="pL">
          <div class="plBox">
            <span class="ico">
              <i class="iconfont icon-biaoqing"></i>
            </span> 
            <span class="inp">
              <input type="text" placeholder="说说你的想法"> 
            </span>
              
            <span class="but">
                <button>发送</button>
            </span>
              
          </div>
        </div>
    </div>
</template>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
import jsonp from "jsonp";
import mv_title from "../components/Mv_title";
import CommentsBox from "../components/CommentsBox";
export default {
  name: "Mv_play",
  data() {
    return {
      mv: "",
      id: this.$route.params.videoId,
    };
  },
  components: {
    mv_title,
    CommentsBox
  },
  created() {
    jsonp(
      "http://www.yinyuetai.com/api/info/get-video-urls?videoId=" + this.id,
      null,
      (err, res) => {
        if (!err) {
          this.mv = res.hcVideoUrl;
        } else {
          console.log(err);
        }
      }
    );
  },
  methods: {
    down() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang='scss' >
// mv页面
.Mv_play {
  font-size: 0;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  position: relative;
  z-index: 100;
  // mv窗口
  .mv_box {
    width: 100%;
    background: #f1f1f1;
  }
  .retu {
    display: block;
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    color: #fff;
    font-size: 0.9rem;
    // display:none;
  }
  .pL {
    width: 100%;
    height: 7%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #f7f7f7;
    .plBox {
      width: 100%;
      height: 100%;
      .ico {
        display: inline-block;
        width: 16%;
        height: 100%;
        position: relative;
        
        i {
          font-size: 0.7rem;
          color: #848992;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .inp {
        width: 63%;
        height: 100%;
        position: relative;
        display: inline-block;
        input {
          width: 90%;
          height: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 0.2rem;
          border: 1px solid #d0d4d7;
          padding-left: 0.3rem;
          box-sizing: border-box;
          font-size: 12px;
          color:#22c5bd;
        }
      }

      .but {
        width: 21%;
        height: 100%;
        display: inline-block;
        position: relative;
        button {
          background: #22c5bd;
          border-radius: 0.5rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 0.3rem;
          color: #fff;
          width: 60%;
          height: 50%;
          line-height: 100%;
          outline: none;
        }
      }
    }
  }
}
</style>

